import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Avatar, Select } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getSupplierList, getTypeList } from '@/services/supplier/manageOperator'
import { router } from 'umi'

const { Option } = Select;
// 表头
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center'
    },
    {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
        align: 'center'
    },
    {
        title: '商户名称',
        dataIndex: 'companyName',
        key: 'companyName',
        align: 'center'
    },
    {
        title: '商户LOGO',
        dataIndex: 'logo',
        key: 'logo',
        align: 'center',
        render: logo => <Avatar shape="square" size="large" src={logo} />
    },
    {
        title: '业态',
        dataIndex: 'tradeName',
        key: 'tradeName',
        align: 'center'
    },
    {
        title: '商户类型',
        dataIndex: 'merchantsType',
        key: 'merchantsType',
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center'
    }
]

const ManageOperator = props => {
    const { form } = props
    const { getFieldDecorator } = form
    const [supplierList, setSupplierList] = useState([])
    const [pageNo, setPageNo] = useState(1)
    const [pageSize, setpageSize] = useState(10)
    const [total, setTotal] = useState(1)
    const [typeList, setTypeList] = useState([])

    useEffect(() => {
        init()
    }, [])

    const init = async () => {
        await getSupplierLists()
        await getTypeLists()
    }
    // 表单查询
    const handleSearch = e => {
        e.preventDefault()
        form.validateFields((err, values) => {
            getSupplierLists('1', values.name, values.type)
        })
    }
    // 表单清空
    const handleReset = e => {
        form.resetFields();
    }
    // 查询条件
    const getFields = () => {
        return (
            <>
                <Col span={8}>
                    <Form.Item label={`商户名称`}>
                        {getFieldDecorator(`name`, {})
                            (<Input />)}
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item label={`业态`}>
                        {getFieldDecorator(`type`, {})
                        (<Select
                            showSearch
                            filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                        >
                            {typeList && typeList.map(r => <Option key={r.id} value={r.id}>{r.catName}</Option>)}
                        </Select>)}
                    </Form.Item>
                </Col>
            </>
        )
    }
    // 选择业态
    const selectType = value => {
        console.log(value)
    }
    // 按钮处理
    const handleBtn = type => {
        // 跳转到 addSupplier 页面
        router.push('/supplier/addSupplier')
    }
    // 获取商户列表
    const getSupplierLists = async (pageNo = 1, merchantName, tradeId) => {
        let params = {
            pageNo,
            pageSize,
            merchantName,
            tradeId
        }
        let res = await getSupplierList(params)
        if (res.code === '0') {
            // 赋值编号
            res.data.forEach((item, index) => {
                item.index = index + 1
            })
            await setSupplierList(res.data)
            await setTotal(res.iTotalDisplayRecords)
        } else {
            alert(res.msg)
        }
    }
    const pagination = {
        total: parseInt(total),
        onChange(page) {
            getSupplierLists(page)
        }
    }
    // 获取业态列表
    const getTypeLists = async () => {
        let res = await getTypeList()
        if (res.code === '0') {
            setTypeList(res.data)
        } else {
            alert(res.msg)
        }
    }
    return (
        <PageHeaderWrapper>
            <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
            <RenderButtom click={handleBtn} />
            <Table
                columns={columns}
                dataSource={supplierList}
                rowKey={record => record.id}
                pagination={pagination}
            />
        </PageHeaderWrapper>
    )
}

export default Form.create()(ManageOperator)
